﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="Learn._001Hellword.a" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/knockout-3.3.0.js"></script>

    <%--KnockOut--如何使用面向对象的方式来写前端  --%>
</head>
<body>
    <%--<form id="form1" runat="server"></form>--%>
    <p>FirstName:<span data-bind="text:firstName"></span></p>
    <p>LastName:<span data-bind="text: lastName"></span></p>
    <p>FistName<input type="text" data-bind="value:firstName" name="firstName" /></p>
    <p>LastName<input type="text" name="lastName" data-bind="value:lastName" /></p>
    <p>FullName:<span data-bind="text:fullName"></span></p>
    <input type="button" value="Go caps" data-bind="click:capitalizeLastName" />
    <script>
        function ViewModel() {
            this.firstName = ko.observable('Bert');//字段
            this.lastName = ko.observable('Bertington');
            this.fullName = ko.computed(function () {//属性
                return this.firstName() + ' ' + this.lastName();
            }, this);
            //方法
            this.capitalizeLastName = function myfunction() {
                var curVal = this.lastName();
                this.lastName(curVal.toUpperCase());
            };
        }
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>
